<template>
  <div>
    <el-row :span="24">
      <el-col :md="7"
              :xs="24"
              :sm="24">
        <basic-container>
          <div class="info">
            <div class="img-border">
              <a href="#">
                <div class="img"><img src="https://gitee.com/uploads/61/632261_smallweigit.jpg"></div>
              </a><img alt="用户等级"
                   src=""
                   class="img-v"></div>
            <div class="user">
              <div class="user-img">
                <span style="user-title">smallwei</span>
                <div class="user-subtitle">VIP用户</div>
              </div>
              <div class="user-item">绑定机构：Avue后台模版</div>
              <div class="user-item">认证信息：hello 大家好！</div>
            </div>
          </div>
        </basic-container>
      </el-col>
      <el-col :md="17"
              :xs="24"
              :sm="24">
        <basic-container>
          <avue-data-icons :option="easyDataOption2"></avue-data-icons>
        </basic-container>
      </el-col>
    </el-row>
    <basic-container>
      <avue-data-box :option="easyDataOption"></avue-data-box>
    </basic-container>
    <basic-container>
      <avue-crud :data="data"
                 :option="tableOption">
        <template slot-scope="scope"
                  slot="username">
          <el-tag>{{scope.row.username}}</el-tag>
        </template>
        <template slot-scope="scope"
                  slot="stars">
          <a :href='scope.row.git'
             target="_blank">
            <img :src="scope.row.stars"
                 alt='star' />
          </a>
        </template>
        <template slot-scope="scope"
                  slot="address">
          <a :href="scope.row.git"
             target="_blank">{{scope.row.address}}</a>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: "wel",
  data() {
    return {
      tableOption: {
        border: true,
        index: true,
        expand: true,
        stripe: true,
        selection: true,
        page: false,
        menuBtn: true,
        menuAlign: "center",
        align: "center",
        column: [
          {
            label: "用户名",
            prop: "username",
            width: 120,
            span: 24,
            solt: true,
            sortable: true,
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur"
              }
            ]
          },
          {
            label: "类型",
            prop: "type",
            width: 80,
            type: "select",
            sortable: true,
            dicData: [
              {
                label: "前端",
                value: 0
              },
              {
                label: "后端",
                value: 1
              }
            ]
          },
          {
            label: "stars",
            width: "150",
            prop: "stars",
            sortable: true,
            solt: true
          },
          {
            label: "码云",
            solt: true,
            span: 24,
            prop: "address",
            type: "textarea",
            overHidden: true
          },
          {
            label: "项目介绍",
            width: "300",
            prop: "info",
            editDisabled: true,
            formHeight: 200,
            type: "ueditor",
            span: 24,
            overHidden: true
          }
        ]
      },
      data: [
        {
          username: "lengleng",
          name: "lengleng",
          number: 12,
          type: "0",
          stars: "https://gitee.com/log4j/pig/badge/star.svg?theme=white",
          git: "https://gitee.com/log4j/pig",
          address: "https://gitee.com/log4j",
          info:
            "Pig是基于Spring Cloud、OAuth2.0，使用Vue前后分离的开发平台,支持账号、 短信、 SSO等多种登录。 "
        },
        {
          username: "smallwei",
          name: "smallwei",
          number: 20,
          type: "1",
          stars:
            "https://gitee.com/smallweigit/avue/badge/star.svg?theme=white",
          git: "https://gitee.com/smallweigit/avue",
          address: "https://gitee.com/smallweigit",
          info:
            "Avue是一个后台集成解决方案，它基于 Vue.js 和 element。 使用了最新的前端技术栈，支持权限验证，第三方网站嵌套等功能。"
        }
      ],
      easyDataOption2: {
        // color: 'rgb(63, 161, 255)',
        span: 6,
        discount: true,
        data: [
          {
            title: "错误日志",
            icon: "icon-cuowu"
          },
          {
            title: "数据展示",
            icon: "icon-shujuzhanshi2"
          },
          {
            title: "权限管理",
            icon: "icon-jiaoseguanli"
          },
          {
            title: "菜单管理",
            icon: "icon-caidanguanli"
          }
        ]
      },
      easyDataOption: {
        data: [
          {
            title: "错误日志",
            count: 12332,
            icon: "icon-cuowu",
            color: "rgb(49, 180, 141)"
          },
          {
            title: "数据展示",
            count: 33,
            icon: "icon-shujuzhanshi2",
            color: "rgb(56, 161, 242)"
          },
          {
            title: "权限管理",
            count: 2223,
            icon: "icon-jiaoseguanli",
            color: "rgb(117, 56, 199)"
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  methods: {}
};
</script>

<style scoped="scoped" lang="scss">
.info {
  padding: 12px 0;
  .img-border {
    width: 64px;
    height: 65px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
  }
  .img-v {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
  }
  .img {
    border-radius: 5px;
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
    img {
      display: block;
      max-width: none;
      height: 64px;
      opacity: 1;
      width: 64px;
      margin-left: 0px;
      margin-top: 0px;
    }
  }
  .user {
    margin-left: 20px;
    display: inline-block;
    color: rgb(153, 153, 153);
    vertical-align: middle;
  }
  .user-title {
    font-size: 18px;
    color: rgb(102, 102, 102);
    margin-right: 5px;
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .user-subtitle {
    display: inline-block;
    width: 40px;
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    padding: 0px 5px;
    margin-left: 10px;
    font-size: 12px;
    text-align: center;
    color: rgb(255, 44, 84);
    background-color: rgb(255, 242, 244);
    white-space: nowrap;
  }
  .user-item {
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
